<template>
  <!--按钮风格单选组件 -->
  <div class="list-box">
    <div class="flex" v-show="!showAll">
      <div class="item" :class="{ active: selectValue === item[myOptions.valueKey]||multipleSelects.indexOf(item[myOptions.valueKey])>-1,disabled:myOptions.disabled }" v-for="(item, i) in defaultList" :key="i" @click="itemClick(item, i)" :style="{
          minWidth: myOptions.itemWidth,
          height: myOptions.itemHeight,
          fontSize: myOptions.fontSize,
          lineHeight: myOptions.itemHeight,
        }">
        {{ item[myOptions.labelKey]}}
        <div class="num" v-if="myOptions.labelKey2">
          商品数量：<span>{{item[myOptions.labelKey2]||0}}</span>
        </div>
      </div>

      <div v-if="showMoreBtn" class="more-btn font16" :style="{ lineHeight: myOptions.itemHeight }" @click="showAll = true">
        <span> 更多 </span>
        <span class="el-icon-arrow-right"></span>
      </div>
    </div>
    <div class="flex" v-show="showAll">
      <div class="item" :class="{ active: selectValue === item[myOptions.valueKey]||multipleSelects.indexOf(item[myOptions.valueKey])>-1,disabled:myOptions.disabled }" v-for="(item, i) in allList" :key="i" @click="itemClick(item, i)" :style="{
          minWidth: '' + myOptions.itemWidth,
          height: myOptions.itemHeight,
          fontSize: myOptions.fontSize,
          lineHeight: myOptions.itemHeight,
        }">
        {{ item[myOptions.labelKey] }}
        <div class="num" v-if="myOptions.labelKey2">
          商品数量：<span>{{item[myOptions.labelKey2]||0}}</span>
        </div>
      </div>
      <div class="more-btn font16" :style="{ lineHeight: myOptions.itemHeight }" @click="showAll = false">
        <span> 收起 </span>
        <span class="el-icon-arrow-up"></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    options: {
      type: Object,
      default: () => {},
    },
    listData: {
      type: Array,
      default: () => [],
    },
    selected: {
      type: Number | String,
      default: "",
    },
    selectedArr: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    options: {
      handler(newVal) {
        this.myOptions = {
          ...this.myOptions,
          ...newVal,
        };
      },
      deep: true,
      immediate: true,
    },
    listData: {
      handler(newVal) {
        if (newVal && newVal.length) {
          this.allList = newVal;
          if (newVal.length > this.myOptions.limitShow) {
            this.showMoreBtn = true;
            this.defaultList = newVal.slice(0, this.myOptions.limitShow);
          } else {
            this.showMoreBtn = false;
            this.defaultList = newVal;
          }
        } else {
          this.defaultList = [];
          this.allList = [];
          this.showMoreBtn = false;
        }
      },
      deep: true,
      immediate: true,
    },
    selected: {
      handler(newVal) {
        if (newVal) {
          this.selectValue = newVal;
        } else {
          this.selectValue = "";
        }
      },
      immediate: true,
    },
    selectedArr: {
      handler(newVal) {
        if (newVal) {
          this.multipleSelects = JSON.parse(JSON.stringify(newVal));
        } else {
          this.multipleSelects = [];
        }
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      myOptions: {
        limitShow: 5,
        itemWidth: "83px",
        itemHeight: "32px",
        fontSize: "12px",
        valueKey: "value",
        labelKey: "name",
        labelKey2: "",
        disabled: false,
        multiple: false,
      },
      defaultList: [],
      allList: [],
      showAll: false,
      selectValue: "",
      showMoreBtn: true,
      multipleSelects: [], //多选模式下选择的项目id集合
    };
  },
  created() {},
  methods: {
    itemClick(item) {
      if (this.myOptions.disabled) {
        return;
      }
      if (this.myOptions.multiple) {
        // 多选模式
        let i = this.multipleSelects.indexOf(item[this.myOptions.valueKey]);
        if (i > -1) {
          this.multipleSelects.splice(i, 1);
        } else {
          this.multipleSelects.push(item[this.myOptions.valueKey]);
        }
        this.$emit("change", this.multipleSelects);
      } else {
        this.selectValue = item[this.myOptions.valueKey];
        if(this.myOptions.labelKey2){
          this.selectValue = ''
        }
        this.$emit("change", this.selectValue, item);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.list-box {
  user-select: none;
  > div {
    flex-wrap: wrap;
  }
  .more-btn {
    color: $primary;
    font-weight: bold;
    cursor: pointer;
    .el-icon-arrow-right {
      font-weight: 600;
    }
  }
  .item {
    background-color: $fff;
    border: 1px solid $primary;
    border-radius: 4px;
    text-align: center;
    margin: 0 5px 10px;
    padding:  0 10px;
    cursor: pointer;
    flex-shrink: 0;
    // padding:0 10px;
    .num{
      font-size: 13px;
      span{
        font-size: 16px;
      }
    }
    &:hover {
      background-color: $primary30;
    }
    &.active {
      background-color: $primary;
      border-color: $primary;
      color: $fff;
    }
    &.disabled {
      cursor: no-drop;
      background-color: $grey10;
    }
    &.disabled.active {
      background-color: $primary30;
    }
  }
}
</style>
